Creating and Running Your First React Native Application

Course: React Native Training

Topic: Creating and Running Your First React Native Application

Course Link: React Native Training Course

Demo Link: Register for Course Demo

JustAcademy Website: Visit JustAcademy

1. Introduction to React Native

React Native is an open-source framework for developing mobile applications using JavaScript or TypeScript and React. It allows developers to build Android and iOS applications using reusable components and a shared application codebase.

Creating and running your first React Native application helps you understand how a mobile project is created, how its files are organized, how user interfaces are built, and how the application is launched on an emulator or physical device.

1.1 What Is a React Native Application?

A React Native application is a mobile application built with React Native components, JavaScript or TypeScript logic, and supporting development tools. React Native provides components for displaying text, arranging layouts, responding to user interactions, and managing application state.

React Native applications can be used to develop:

• E-commerce and shopping applications.
• Social networking and messaging applications.
• Educational and e-learning applications.
• Travel and hotel booking applications.
• Fitness and health-tracking applications.
• Business and productivity applications.
• Food delivery and online service applications.

1.2 How a React Native Application Works

1. The developer creates a project and writes JavaScript or TypeScript code.
2. The development tooling processes the application code.
3. The application loads the code using the selected development workflow.
4. React Native renders the interface using supported native components.
5. The user interacts with buttons, forms, and other interface elements.
6. Application logic processes those interactions and updates the interface when necessary.

2. Learning Objectives

After completing this topic, learners should be able to:

• Understand the basic structure of a React Native application.
• Identify the tools required for mobile application development.
• Create a new project using Expo.
• Understand the purpose of important project files and folders.
• Write a basic React Native component.
• Use View, Text, Button, and StyleSheet.
• Manage changing data using the useState Hook.
• Start the development server.
• Run an application on an Android emulator or physical device.
• Understand Fast Refresh and basic debugging.
• Troubleshoot common project setup and runtime errors.

3. Prerequisites for React Native Development

Before creating an application, prepare your development environment and confirm that the required tools are installed.

3.1 Basic Requirements

• A computer running a supported operating system.
• Node.js, preferably a version compatible with the current project requirements.
• npm or another supported package manager.
• A code editor such as Visual Studio Code.
• An internet connection for installing dependencies and development tools.
• An Android device or emulator for Android testing.
• A compatible macOS and Xcode setup when building iOS applications locally.
• Basic knowledge of JavaScript, functions, objects, and arrays.

3.2 Recommended Development Tools

For beginners, Expo is a convenient way to start. Some Expo workflows do not require a local native build environment, while local Android or iOS builds require the corresponding native development tools.

4. Installing and Verifying Node.js

Node.js is used by React Native development tools to run JavaScript-based commands. npm is normally included with the Node.js installation.

4.1 Install Node.js

1. Visit the official Node.js website.
2. Download a supported release compatible with your project requirements.
3. Run the installer for your operating system.
4. Complete the installation process.
5. Open a new terminal window.

Official website: Download Node.js

4.2 Verify Node.js and npm

Run these commands in the terminal:

node --version
npm --version

Both commands should display version numbers. If either command fails, check the installation and PATH configuration before continuing.

5. Understanding React Native Project Setup Options

React Native applications can be started using a framework such as Expo or through the React Native Community CLI. The correct option depends on the project's requirements.

This lesson uses Expo for the main practical example because it offers a simple way to create and run a first application.

6. Creating a New React Native Application with Expo

Expo provides tools for creating, running, and developing React Native applications. The create-expo-app command generates a project containing the files and dependencies needed to get started.

6.1 Open the Terminal

1. Open Visual Studio Code or your preferred code editor.
2. Open a terminal window.
3. Navigate to the directory where you want to store your projects.
4. Verify that Node.js and npm are installed.

For example, you can navigate to a projects directory using a command such as:

cd Desktop

This is only an example. Use the actual directory path on your computer.

6.2 Create the Project

Run the following command to create a project named MyFirstApp:

npx create-expo-app@latest MyFirstApp

The command creates a project directory and installs or prepares the dependencies required by the selected template. Follow any prompts displayed by the current version of the tool.

Official guide: Create an Expo Project.

6.3 Navigate to the Project Directory

After the project has been created, run:

cd MyFirstApp

All project commands should normally be run from the project directory unless the documentation specifies otherwise.

6.4 Open the Project in Visual Studio Code

If Visual Studio Code is installed and its command-line launcher is available, run:

code .

Alternatively, open Visual Studio Code and choose the project folder from the File menu.

6.5 Install Dependencies if Required

The project creation command generally installs the necessary dependencies. If the installation was skipped or dependencies are missing, run:

npm install

Wait until installation finishes. If an error occurs, review the message and verify Node.js, network connectivity, and package compatibility.

7. Understanding the Project Folder Structure

The exact folder structure depends on the selected template. A default Expo project commonly uses Expo Router and may include a route directory such as src/app or app. Other templates may use a root App.js or App.tsx file.

7.1 Common Files and Folders

7.2 Understanding package.json

The package.json file defines project information, scripts, and dependencies. It allows npm to manage packages and run the project's configured commands.

Example of a simplified scripts section:

{
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  }
}

This is an illustrative example, not a replacement for your generated file. The actual scripts and package versions may differ depending on the template.

7.3 Identifying the Application Entry Point

The entry point determines which component or route is displayed when the application starts.

• In a simple project, the entry point may be App.js or App.tsx.
• In an Expo Router project, the initial screen may be defined in a route such as app/index.tsx or src/app/index.tsx.
• Navigation and layout files may determine how the initial route is displayed.

Before editing code, identify the file used by your particular template.

8. Creating Your First Welcome Screen

In this section, you will create a simple screen that displays a welcome message, a short description, and a button. The button will update the message when pressed.

8.1 Example for a Root App.js or App.tsx File

If your template uses a root application component, you can use the following code in the appropriate file:

import React, { useState } from 'react';
import {
  View,
  Text,
  Button,
  StyleSheet
} from 'react-native';

export default function App() {
  const [message, setMessage] = useState(
    'Welcome to React Native!'
  );

  return (
    <View style={styles.container}>
      <Text style={styles.title}>
        {message}
      </Text>

      <Text style={styles.description}>
        My first mobile application
      </Text>

      <Button
        title="Click Me"
        onPress={() =>
          setMessage('You clicked the button!')
        }
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f4f7fb',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 12,
    textAlign: 'center',
  },
  description: {
    fontSize: 16,
    marginBottom: 20,
    textAlign: 'center',
  },
});

8.2 Explanation of the Code

Importing React and useState: React provides the component model. The useState Hook stores data that can change while the component is running.

import React, { useState } from 'react';

Importing React Native components: The example uses View, Text, Button, and StyleSheet to build and style the interface.

import {
  View,
  Text,
  Button,
  StyleSheet
} from 'react-native';

Creating a component: The App function returns the elements that make up the screen.

export default function App() {
  return (
    // UI elements
  );
}

Managing state: The message starts with a welcome string. Calling setMessage() changes the state, and React updates the displayed message.

const [message, setMessage] = useState(
  'Welcome to React Native!'
);

Using View: View acts as a container for other interface elements.

Using Text: Text displays words and other textual content.

Using Button: Button creates a basic interactive control. The onPress property specifies what happens when the user presses it.

Using StyleSheet: StyleSheet organizes visual properties such as alignment, spacing, text size, and background color.

8.3 Important Concepts

9. Adding the Welcome Screen to an Expo Router Project

If your project uses Expo Router, the initial screen is usually defined by a route file. For example, it may be app/index.tsx or src/app/index.tsx. Add the screen to the route used by your project rather than assuming that a root App.js file controls the screen.

9.1 Example Route Component

import { useState } from 'react';
import {
  View,
  Text,
  Button,
  StyleSheet
} from 'react-native';

export default function HomeScreen() {
  const [message, setMessage] = useState(
    'Welcome to React Native!'
  );

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{message}</Text>

      <Text style={styles.description}>
        My first mobile application
      </Text>

      <Button
        title="Get Started"
        onPress={() =>
          setMessage('Your first app is running!')
        }
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 12,
    textAlign: 'center',
  },
  description: {
    fontSize: 16,
    marginBottom: 20,
    textAlign: 'center',
  },
});

9.2 Save and Review the Screen

1. Open the initial route file used by the project.
2. Add the component code or update the existing screen.
3. Save the file.
4. Keep the existing navigation and layout configuration unless a change is necessary.
5. Start the development server and view the updated interface.

10. Starting the Development Server

The development server makes the application bundle and development resources available to the running application. Expo projects commonly use Expo CLI to start this server.

10.1 Start Expo

From the project directory, run:

npx expo start

The terminal should display development-server information and usually a QR code. The available keyboard shortcuts depend on the current development environment.

10.2 Understanding the Output

• The terminal indicates whether the development server started successfully.
• A QR code may be displayed for opening the application on a physical device.
• Shortcuts may be available to launch Android or iOS targets.
• Errors may appear if dependencies are missing or the project configuration is invalid.

10.3 Stop the Server

To stop the development server, press Ctrl + C in the terminal where it is running.

11. Running the Application on an Android Emulator

An Android emulator lets you run and test your application on a virtual Android device. Local Android builds require a compatible Android development environment.

11.1 Create an Android Virtual Device

1. Open Android Studio.
2. Open Device Manager.
3. Create a new virtual device.
4. Select a device profile.
5. Choose and download a compatible Android system image.
6. Finish creating the virtual device.
7. Start the emulator and wait for Android to finish booting.

11.2 Open the Expo Application

1. Start the development server with npx expo start.
2. Confirm that the Android emulator is running.
3. Use the Android launch shortcut displayed by Expo, commonly the A key.
4. Wait for the application to load.
5. Confirm that the welcome screen appears.
6. Press the button and verify that the displayed message changes.

11.3 Run a Local Native Android Build

For an Expo project configured for local native builds, use:

npx expo run:android

This command builds and launches the native Android application. It requires the relevant Android SDK, build tools, and compatible Java environment. It is different from opening a compatible project in Expo Go.

12. Running the Application on a Physical Android Device

A physical Android device allows you to test touch interactions, performance, screen layout, and real-device behavior.

12.1 Install Expo Go

1. Visit the official Expo Go page or your device's app store.
2. Install Expo Go on a supported Android phone.
3. Connect the phone and development computer to the same Wi-Fi network when using a local network connection.

Official page: Get Expo Go

12.2 Open the Application

1. Run npx expo start in the project directory.
2. Open Expo Go on your phone.
3. Scan the QR code shown by the development server.
4. Wait for the application to load.
5. Verify that the welcome message and button are visible.
6. Press the button and confirm that the message changes.

12.3 Troubleshooting Device Connectivity

• Confirm that the development server is running.
• Check that the computer and phone can communicate over the network.
• Review firewall settings and network restrictions.
• Restart the development server if the connection becomes stuck.
• If the local network blocks device connections, try npx expo start --tunnel.

Tunnel mode can help when local network connectivity is restricted, although it may be slower than a direct local connection.

13. Creating an Application with React Native Community CLI

React Native Community CLI is another way to create a React Native project. It is useful when the project requires direct access to native Android and iOS project files.

13.1 Create a Project

After configuring the native development environment, run the current Community CLI initialization command:

npx @react-native-community/cli@latest init MyFirstApp

Follow the installation output and allow the project files and dependencies to be generated.

13.2 Enter the Project Folder

cd MyFirstApp

13.3 Start Metro

Metro is the JavaScript bundler commonly used by React Native Community CLI projects. Start it in one terminal window:

npm start

Keep this terminal running during development.

13.4 Run the Android Application

Open a second terminal in the project directory and run:

npm run android

A compatible emulator must be running, or a physical Android device must be connected and authorized. If the project uses different scripts, follow the commands defined in its package.json.

13.5 Difference Between Expo and Community CLI

Both workflows use React Native, but their project structure and commands differ. Before running a command, confirm whether your application uses Expo Go, an Expo development build, or Community CLI.

14. Understanding Fast Refresh

Fast Refresh helps developers see many JavaScript or TypeScript changes in the running application without manually rebuilding the entire app after every edit.

14.1 How Fast Refresh Works

1. Open a screen file in your code editor.
2. Change text, a style, or component logic.
3. Save the file.
4. Wait for the development tooling to detect the change.
5. Observe the updated interface on the device or emulator.

14.2 Example of a Quick Update

Change the following text:

<Text>Welcome to React Native!</Text>

To:

<Text>My First Mobile App</Text>

Save the file and observe whether the updated text appears automatically.

14.3 When a Reload or Rebuild May Be Necessary

• When changes affect native configuration.
• When a new dependency requires a native rebuild.
• When the development server or JavaScript runtime becomes unresponsive.
• When the current change cannot be applied safely through Fast Refresh.

15. Styling a React Native Application

React Native styles are written as JavaScript objects. Some property names resemble CSS, but React Native styling differs from browser CSS in important ways.

15.1 Common Style Properties

15.2 Benefits of StyleSheet

• Keeps styling organized.
• Makes styles easier to reuse.
• Improves readability of component code.
• Helps developers update the interface consistently.

16. Understanding State and User Interaction

State is data managed by a component. When the state changes, React updates the interface to reflect the new value. State is commonly used for counters, form values, toggles, messages, and other interactive features.

16.1 Example: Button Counter

import { useState } from 'react';
import {
  View,
  Text,
  Button,
  StyleSheet
} from 'react-native';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.counter}>
        Button pressed: {count}
      </Text>

      <Button
        title="Increase Count"
        onPress={() => setCount(value => value + 1)}
      />

      <Button
        title="Reset"
        onPress={() => setCount(0)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  counter: {
    fontSize: 22,
    marginBottom: 20,
  },
});

16.2 Explanation

• useState(0) initializes the counter at zero.
• count stores the current counter value.
• setCount() updates the state.
• The increase button adds one to the current value.
• The reset button sets the value back to zero.
• React updates the displayed counter when its state changes.

17. Debugging Your First Application

Debugging means identifying and correcting errors in application code or the development environment.

17.1 Common Debugging Techniques

• Read the error messages in the terminal.
• Review development-server output.
• Check the screen on the emulator or physical device.
• Use supported React Native developer tools.
• Inspect Android logs when investigating native issues.
• Review the code around the reported line or component.
• Check dependency and SDK compatibility when builds fail.

17.2 Using console.log()

The console.log() function helps display values and messages during development.

const appName = 'MyFirstApp';
console.log('Application:', appName);

Logging is useful for checking program flow and variable values. Do not log passwords, access tokens, or other sensitive information.

17.3 Common Error Categories

18. Common Problems and Solutions

19. Best Practices for Beginners

• Use meaningful project, component, and variable names.
• Start with a simple screen before adding advanced features.
• Keep components small and reusable.
• Use state for data that changes during interaction.
• Organize styles so that the code remains readable.
• Test changes regularly on a device or emulator.
• Read errors carefully instead of repeatedly rerunning commands without diagnosis.
• Keep dependencies compatible with the project's React Native or Expo version.
• Use version control to track project changes.
• Avoid storing secrets directly in application source code.
• Follow the setup instructions for the workflow used by your project.
• Refer to official documentation when commands or templates change.

20. Practical Exercise: Build a Welcome Application

Objective

Create a React Native application that welcomes users, displays a short description, and updates a message when a button is pressed.

Tasks

1. Create a new Expo project named MyFirstApp.
2. Open the project in your code editor.
3. Identify the entry file or initial route.
4. Create a welcome screen using View and Text.
5. Add a Button component.
6. Use useState to change the welcome message after the button is pressed.
7. Apply styles using StyleSheet.create().
8. Start the development server.
9. Open the application in Expo Go or an Android emulator.
10. Press the button and verify that the message changes.
11. Change the title or styling and observe Fast Refresh.

Expected Result

The application should display a welcome message, descriptive text, and a working button. Pressing the button should update the displayed message. Ordinary JavaScript changes should normally be visible without rebuilding the entire native application.

21. Mini Project: Personal Profile Application

Project Description

Create a simple profile screen that displays a name, role, introduction, and a button that shows or hides additional information. This project reinforces components, state, event handling, and styling.

Sample Code

import { useState } from 'react';
import {
  View,
  Text,
  Button,
  StyleSheet
} from 'react-native';

export default function App() {
  const [showDetails, setShowDetails] = useState(false);

  return (
    <View style={styles.container}>
      <Text style={styles.name}>Alex Johnson</Text>
      <Text style={styles.role}>React Native Learner</Text>

      <Text style={styles.intro}>
        I am learning to build mobile applications.
      </Text>

      <Button
        title={showDetails ? 'Hide Details' : 'Show Details'}
        onPress={() => setShowDetails(value => !value)}
      />

      {showDetails && (
        <Text style={styles.details}>
          My goal is to create useful mobile apps.
        </Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 24,
    backgroundColor: '#f4f7fb',
  },
  name: {
    fontSize: 26,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  role: {
    fontSize: 18,
    marginBottom: 12,
  },
  intro: {
    fontSize: 16,
    textAlign: 'center',
    marginBottom: 20,
  },
  details: {
    fontSize: 16,
    textAlign: 'center',
    marginTop: 20,
  },
});

Project Features

• Displays a user's name and role.
• Shows a short introduction.
• Uses state to show or hide additional information.
• Handles user interaction through a button.
• Uses styles to create a readable layout.

Suggested Improvements

• Add a profile image using the Image component.
• Add a contact button.
• Display a list of skills using reusable components.
• Move the profile section into a separate component.
• Improve layout behavior for different screen sizes.

22. Interview Questions and Answers

Q1. What is React Native?

Answer: React Native is a framework for developing mobile applications using React and JavaScript or TypeScript with support for native platform components.

Q2. What is Expo?

Answer: Expo is a framework and set of tools that simplify React Native project creation, development, testing, and deployment.

Q3. What is create-expo-app?

Answer: It is a command-line tool that creates a new Expo and React Native project from a selected template.

Q4. What is Node.js used for in React Native development?

Answer: Node.js runs JavaScript-based development tools and scripts used for project creation, package management, and bundling.

Q5. What is npm?

Answer: npm is a package manager used to install dependencies and execute project scripts.

Q6. What is a React Native component?

Answer: A component is a reusable unit of interface and logic, such as a welcome screen, button, profile card, or navigation screen.

Q7. What is the purpose of View?

Answer: View is a container used to group, arrange, and style other interface components.

Q8. What is the purpose of Text?

Answer: Text displays textual content in a React Native interface.

Q9. What is useState?

Answer: useState is a React Hook that allows a function component to store and update local state.

Q10. What is onPress?

Answer: onPress is a callback property used by pressable components to respond to user interaction.

Q11. What is Metro?

Answer: Metro is the JavaScript bundler commonly used by React Native development workflows to process application code and serve bundles during development.

Q12. What is Fast Refresh?

Answer: Fast Refresh applies many code changes to a running development application quickly, reducing the need for manual reloads.

Q13. How do you run an Expo application?

Answer: Run npx expo start in the project directory and open the application on a supported device or emulator.

Q14. How do you run a Community CLI Android application?

Answer: Configure the native environment, start Metro, and use the project's Android run script, commonly npm run android.

Q15. What is the difference between state and props?

Answer: State is data managed by a component and can change over time. Props are values passed to a component by its parent.

Q16. What is StyleSheet.create()?

Answer: It organizes style definitions in a JavaScript object that can be assigned to React Native components through the style property.

Q17. Why might an application fail to load?

Answer: Possible causes include a stopped development server, syntax errors, missing dependencies, network issues, or incompatible native configuration.

Q18. Can React Native development begin without Android Studio?

Answer: Yes. Some Expo workflows allow development and testing on a supported physical device without a local Android build setup. Local native Android builds require compatible Android development tools.

Q19. What is an Android emulator?

Answer: An Android emulator runs a virtual Android device on a computer so developers can test applications without a physical phone.

Q20. What is the purpose of a development server?

Answer: It serves development resources and application bundles to the running application and supports rapid testing of code changes.

23. Quick Revision Checklist

• Understand React Native and Expo fundamentals.
• Install and verify Node.js and npm.
• Create a project with the appropriate project-creation command.
• Identify the application entry point or initial route.
• Understand View, Text, Button, and StyleSheet.
• Use useState to update interface content.
• Start the development server using npx expo start.
• Run the application on a physical device or emulator.
• Understand Fast Refresh and when a reload may be necessary.
• Recognize the differences between Expo and Community CLI.
• Read terminal and runtime errors while debugging.
• Practice creating a welcome screen and an interactive profile screen.

24. Official Learning Resources

• Expo: Create a Project
• Expo: Start Developing
• Expo: Create Your First App
• React Native: Getting Started
• React Native: Environment Setup
• Official Node.js Website
• Download Android Studio
• Get Expo Go
• React Native Training Course at JustAcademy
• Register for a JustAcademy Course Demo
• JustAcademy Official Website

25. Conclusion

Creating and running your first React Native application introduces the essential workflow of mobile application development. You learn to create a project, understand its files, build a user interface, manage state, style components, and run the application on a device or emulator.

Starting with a simple welcome screen makes it easier to understand the relationship between application code, the development server, and the rendered interface. After the first application works, you can extend it with navigation, forms, API integration, local storage, and other mobile features.

For structured learning, visit the React Native Training Course or register for a course demo at JustAcademy.